<template>
  <h1>Dialog 弹窗</h1>
  <Captions title="基础用法">
    弹出一个对话框，这里<span class="mark-span">visible</span>支持两种写法 <br>
    <span class="mark-span">:visible="x" @update:visible="x = $event" </span>
    等价于
    <span class="mark-span">v-model:visible='x' </span>
    <br>
    添加<span class="mark-span">:closeOnClickOverlay="false" </span> 表示不可以通过点击 modal 关闭 Dialog，默认可以点击是否可以通过点击 modal 关闭 Dialog。
  </Captions>
  <Demo :component="Dialog1"></Demo>

  <Captions title="一句话打开dialog(js的方式)">
  </Captions>
  <Demo :component="Dialog2"></Demo>

  <TableDes :headList="headList" :columnList="columnList"></TableDes>

  <TableDes title="Slot" :headList="headListSlot" :columnList="columnListSlot"></TableDes>

  <TableDes title="Events" :headList="headListEvents" :columnList="columnListEvents"></TableDes>
</template>
<script lang="ts">
  import Captions from '../Captions.vue'
  import TableDes from '../TableDes.vue'
  import Demo from '../Demo.vue'
  import Dialog1 from './Dialog1.vue'
  import Dialog2 from './Dialog2.vue'
  export default {
    name: "DialogDemo",
    components: {
      Demo, Captions, TableDes
     },
    setup() {
      const headList = ['参数', '说明', '类型', '可选值', '默认值']
      const columnList = [
        ['visible/v-model:visible=\'x\'','是否显示 Dialog', 'boolean',  '—', ' false'],
        ['title','Dialog 的标题，也可通过具名 slot （见下表）传入', 'string',  '—', ' —'],
        ['closeOnClickOverlay','是否可以通过点击 modal 关闭 Dialog', 'boolean',  '—', ' true']

      ]
      const headListSlot = ['name', '说明', '插槽使用说明']
      const columnListSlot = [
        ['title','Dialog 标题区的内容', 'v-slot:title'],
        ['content','Dialog 的内容', 'v-slot:content']
      ]
      const headListEvents = ['事件名称', '说明', '回调参数']
      const columnListEvents = [
        ['close','Dialog 关闭的回调', '—'],
        ['query','Dialog 确定按钮的回调', '—'],
        ['cancel','Dialog 取消按钮的回调', '—']
      ]
        return {  Dialog1, Dialog2, headList, columnList, headListSlot, columnListSlot, headListEvents, columnListEvents }
    }
  }
</script>

<style scoped>
</style>
